<!--
 * @description 答题闯关分类组件
 * @author gaohailan
 * @date 2022/11/13
 -->
<template>
  <div
    class="text-classify-comp"
    :style="{ marginTop:top}"
  >
    <van-tabs
      v-model="classifyId"
      :background="bgcolor"
      :title-active-color="activeColor"
      :title-inactive-color="inactiveColor"
      :color="textcolor"
      @change="handleToggleClassify"
    >
      <van-tab title="全部" name />
      <van-tab title="我的" name="my" />
      <van-tab v-for="(item, index) in classifys" :key="index" :name="item.id" :title="item.classifyName" />
    </van-tabs>
  </div>
</template>

<script>
import mixins from '@/components/CustomPage/apps/widget/mixins'

export default {
  name: 'TextClassifyComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      classifyId: '', // 分类ID
      classifys: [], // 分类列表
      mainColor: sessionStorage.getItem('THEME_COLOR')
    }
  },
  computed: {
    bgcolor() {
      return this.option.isDefaultBg ? this.mainColor : this.option.bgcolor
    },
    textcolor() {
      return this.option.textcolor || '#fff'
    },
    activeColor() {
      return this.option.activeColor || '#fff'
    },
    inactiveColor() {
      return this.option.inactiveColor || '#fff'
    },
    isFixed() {
      return this.option.isFixed || ''
    },
    fixedToTop() {
      return this.px2rem(this.option.fixedToTop || 0)
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    }
  },
  methods: {
    setData(result) {
      if (result?.classifyDataList?.data) {
        this.classifys = result?.classifyDataList?.data
      }
    },
    setValue(k) {
      this.$set(this, 'classifyId', k)
    },
    check() {
      return true
    },
    /**
     * 点击分类
     */
    handleToggleClassify(e) {
      if (this.isInitData) {
        this.dispatch_event('filed-value-change', this)
      }
    },
    getValue() {
      const { classifyId } = this
      return {
        classifyId
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.text-classify-comp {
  left: 0;
  right: 0;
  z-index: 2;

  .van-tabs {
    height: rem(88);

    .van-tab {
      &.van-tab--active {
        font-size: rem(30);
      }
    }

    .van-tabs__line {
      bottom: rem(36);
      width: rem(30);
    }
  }
}
</style>
